<template>
<header>
  <dl class="btnList">
    <dd @click="openRulePopFn">规则</dd>
    <router-link tag="dd" :to="{name:'order'}">记录</router-link>
  </dl>
  <button class="btnStyle contactBtn" @click="contactOpenFn">联系我们</button>
  <button v-if="$route.query.code" class="btnStyle meBtn" @click="meBtnFn">我的助力</button>
</header>
</template>

<script>
export default{
  data(){
    return{
    }
  },
  mounted(){
  },
  methods:{
    meBtnFn(){
      this.$router.push({name:'home'});
      window.location.reload();
    },
    openRulePopFn(){
      this.$emit('openRulePop');
    },
    contactOpenFn(){
      this.$emit('contactOpen');
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
header{
  height:620px;
  .btnList{
    position:absolute;
    right:0;
    top:190px;
    dd{
      margin-bottom:20px;
      background:rgba(#000,0.1);
      color:#FFF;
      font-size:24px;
      border-radius:99em 0 0 99em;
      padding:0 20px;
      line-height:44px;
    }
  }
  .contactBtn{
    position:fixed;
    right:20px;
    width:80px;
    height:80px;
    border-radius:12px;
    background-color:rgba(#FFF,0.8);
    color:$c01;
    font-size:16px;
    top:60%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height:1;
    z-index:99;
    &:before{
      content:'';
      width:31px;
      height:30px;
      background:url($imgUrl+'contactIco.png');
      background-size:100% 100%;
      margin-bottom:6px;
    }
  }
  .meBtn{
    position:fixed;
    right:20px;
    width:80px;
    height:80px;
    border-radius:12px;
    background-color:rgba(#FFF,0.8);
    color:#ff6224;
    font-size:16px;
    top:68%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height:1;
    z-index:99;
    &:before{
      content:'';
      width:31px;
      height:30px;
      background:url($imgUrl+'meIco.png');
      background-size:100% 100%;
      margin-bottom:6px;
    }
  }
}
</style>
